<template>
    <view class="cart">
        <view class="main">
            <view class="header">
                <text>满减</text>
                <text>满2件，即可享受9折优惠</text>
            </view>
            <view class="body">
                <u-checkbox-group v-model="checkedList" placement="column">
                    <view class="item" v-for="e in cartsList" :key="e.id">
                        <u-checkbox :name="e.id" shape="circle" size="15" activeColor="#27BA9B"></u-checkbox>
                        <view class="goods">
                            <image :src="e.picture"></image>
                            <view class="right">
                                <div class="top">
                                    <view class="title">{{ e.name }}</view>
                                    <view class="desc">{{ e.attrsText }}</view>
                                </div>
                                <view class="bottom">
                                    <view class="price">￥{{ e.nowPrice }}</view>
                                    <u-number-box integer buttonSize="25" :value="e.count" :name="e.skuId" @change="countChange"></u-number-box>
                                </view>
                            </view>
                        </view>
                    </view>
                </u-checkbox-group>
            </view>
        </view>

        <point-title></point-title>
        <goods-list :dataList="guessLikes" :loadStatus="loadStatus"></goods-list>
    </view>
</template>

<script>
import { getGuessLikes } from '@/api/home'
import { getCartsList, editCartItem } from '@/api/cart'

export default {
    onLoad() {
        this.getCartsList()
        this.getGuessLikes()
    },
    onReachBottom() {
        this.getMore()
    },
    data() {
        return {
            guessLikes: [],
            page: 1,
            pageSize: 10,
            loadStatus: 0,
            cartsList: [],
        }
    },
    methods: {
        async getCartsList() {
            this.cartsList = (await getCartsList()).result
        },
        async getGuessLikes() {
            const res = (await getGuessLikes({
                page: this.page,
                pageSize: this.pageSize
            })).result.items
            this.guessLikes = this.guessLikes.concat(res)
            if (res.length === 0) return true
        },
        getMore() {
            if (this.guessLikes.length > 0 && this.loadStatus === 0) {
                clearTimeout(this.timerId)
                this.timerId = setTimeout(async () => {
                    this.page++
                    this.loadStatus = 1
                    const status = await this.getGuessLikes()
                    if (status) {
                        this.loadStatus = 2
                    } else {
                        this.loadStatus = 0
                    }
                }, 500)
            }
        },
        async countChange(e) {
            await editCartItem({
                selected: !goods.selected,
                skuId: goods.skuId
            })
        }
    },
    computed: {
        checkedList: {
            get() {
                const arr = []
                this.cartsList.forEach(e => {
                    if (e.selected) arr.push(e.id)
                })
                return arr
            },
            async set(value) {
                const arr = this.checkedList.filter(e => !value.includes(e))
                const goods = this.cartsList.find(e => e.id === arr[0])
                await editCartItem({
                    selected: !goods.selected,
                    skuId: goods.skuId
                })
            }
        }
    }
}
</script>

<style scoped lang="scss">
page {
    background-color: #F7F7F7;
}

.cart {
    padding: 20rpx;

    .main {
        color: #333333;

        .header {
            font-size: 24rpx;
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            text:first-child {
                color: white;
                background-image: linear-gradient(to right, #3CCEAF, #27BA9B);
                padding: 3rpx 8rpx;
                border-radius: 4rpx;
                margin-right: 10rpx;
            }
        }

        .body {
            .item {
                display: flex;
                align-items: center;
                font-size: 28rpx;
                background-color: white;
                border-radius: 10rpx;
                padding: 20rpx;
                margin-bottom: 20rpx;

                .goods {
                    display: flex;
                    flex: 1;

                    image {
                        width: 200rpx;
                        height: 200rpx;
                        border-radius: 6rpx;
                    }

                    .right {
                        flex: 1;
                        margin-left: 20rpx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .top {
                            .title {
                                overflow: hidden;
                                display: -webkit-box;
                                text-overflow: ellipsis;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                margin-bottom: 10rpx;
                            }

                            .desc {
                                font-size: 24rpx;
                                color: #999999;
                            }
                        }

                        .bottom {
                            display: flex;
                            justify-content: space-between;

                            .price {
                                font-size: 32rpx;
                                color: #CF4444;
                            }

                            ::v-deep .u-number-box {
                                > input {
                                    font-size: 14px !important;
                                }

                                > view {
                                    width: 25px;

                                    text {
                                        font-size: 12px !important;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
